<template>
  <div class="checkOrder">
    <!--  顶部导航  -->
    <HeaderSimple
      page="userInformation"
      :title="title"
      @goBack="$router.go(-1)"
    ></HeaderSimple>

    <div class="section">
      <div class="section_title">
        <h1>物品金额</h1>
      </div>
      <div class="section_top">
        <div class="section_top_item">
          <span class="item_count">{{ goodsTotal }}</span>
          <em class="item_price">物品总数</em>
        </div>
        <div class="section_top_item">
          <span class="item_count">{{ priceTotal }}</span>
          <em class="item_price">总金额</em>
        </div>
      </div>
      <div class="section_title">
        <h1>订单编号</h1>
      </div>
      <div class="section_center">
        <span class="section_center_item">订单编号：{{ orderCode }}</span>
      </div>
      <div class="section_title">
        <h1>确认收货信息</h1>
      </div>
    </div>
    <div class="section_down">
      <div class="section_down_item">
        <span class="item_info">收货人： {{ takePerson }}</span>
      </div>
      <div class="section_down_item">
        <span class="item_info">联系电话： {{ phone }}</span>
      </div>
      <div class="section_down_item">
        <span class="item_info">所在地区： {{ address }}</span>
      </div>
      <div class="section_down_item">
        <span class="item_info fl">详细地址： </span
        ><van-field
          v-model="inputAddress"
          class="fl item_input"
          placeholder="完善详细的收货地址"
        />
        <span class="fixBtn fr">修改<van-icon name="arrow"/></span>
      </div>
    </div>

    <!--  底部按钮   -->
    <van-button class="confirm" type="default" @click="showPay = true">确定并支付</van-button>

    <!--  支付上拉框  -->
    <van-action-sheet
      v-model="showPay"
      :actions="actions"
      cancel-text="取消"
      @cancel="onCancel"
    />
  </div>
</template>

<script>
import HeaderSimple from "@/components/HeaderSimple";
export default {
  name: "checkOrder",
  components: {
    HeaderSimple
  },
  data() {
    return {
      showPay: false,
      goodsTotal: "1",
      priceTotal: "1,217,371",
      takePerson: "王木木",
      orderCode: "1216731735135143",
      phone: "13860767831",
      address: "浙江省杭州市余杭区",
      inputAddress: '',
      actions: [
        { name: '支付宝' },
        { name: '微信' },
        { name: '建设银行' }
      ]
    };
  },
  created() {
    this.title = this.$route.meta.title;
  },
  methods: {
    // 取消上拉框
    onCancel() {
      this.show = false;
    }
  }
};
</script>

<style scoped lang="less">
@deep: ~">>>";
.checkOrder {
  .section {
    width: 100%;
    padding: 0 30px;
    .section_title {
      height: 109px;
      line-height: 109px;
      h1 {
        font-size: 34px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
      }
    }
    .section_top {
      display: flex;
      justify-content: space-between;
      .section_top_item {
        width: 280px;
        height: 255px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(193, 193, 193, 1);
        border-radius: 12px;
        .item_count {
          width: 100%;
          text-align: center;
          margin-top: 111px;
          display: inline-block;
          font-size: 42px;
          font-family: Arial;
          font-weight: bold;
          color: rgba(255, 59, 62, 1);
        }
        .item_price {
          width: 100%;
          text-align: center;
          margin-top: 48px;
          display: inline-block;
          font-size: 30px;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }
      }
    }
    .section_center {
      width: 100%;
      height: 128px;
      line-height: 128px;
      background: rgba(255, 255, 255, 1);
      border-radius: 12px;
      .section_center_item {
        margin-left: 30px;
        font-size: 30px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
  }
  .section_down {
    width: 100%;
    background: rgba(255, 255, 255, 1);
    padding: 0 30px;
    .section_down_item {
      height: 100px;
      line-height: 100px;
      border-bottom: 2px dotted rgba(226, 226, 226, 1);
      .item_info {
        font-size: 30px;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
      .item_input {
        width: 450px;
        height: 100px;
        line-height: 60px;
      }
      .fixBtn {
        line-height: 100px;
      }
    }
  }
  .confirm {
    position: fixed;
    bottom: 0;
    width: 100%;
    height:98px;
    margin-top: 35px;
    background:linear-gradient(0deg,#FF3B3E,rgba(255,127,63,0.83));
    font-size:32px;
    font-family:PingFang SC;
    font-weight:500;
    color:rgba(255,255,255,1);
  }
}
</style>
